<template>
    <div class="swiperContainer">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide v-for="(item,index) in swiperlist" :key="index">
            <img :src="item.url" alt="">
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>

    </div>

</template>

<script>
    export default {
        name: "Homeswiper",
        props: [],
        components: {},
        data() {
            return {
              //swiper模拟数据
              swiperlist:[
                {id:'01',url:'https://dimg04.c-ctrip.com/images/700510000000q9gcn0CD4_750_284_191.jpg'},
                {id:'02',url:'https://dimg04.c-ctrip.com/images/700w11000000qf60q78AB_750_284_191.jpg'},
                {id:'03',url:'https://dimg04.c-ctrip.com/images/700b0y000000m0tjsBA9C_750_284_191.jpg'}
              ],

              //swiper设置
              swiperOption: {
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                initialSlide:0,
                paginationClickable: true,
                speed: 500,
                loop: true,
                observer:true,
                observeParents:true,
                autoplay : true,
                autoplayDisableOnInteraction : false,
                disableOnInteraction:false, //解决滑动后不能轮播的问题
                pagination: {//分页小圆点
                  el: '.swiper-pagination',
                },

              }
            }
        },
        methods: {},
        mounted: function () {
        },
        watch: {},
        computed: {},
        filters: {},
    }








</script>

<style  scoped>

.swiperContainer{
  width: 100%;
  height: 3.7866rem;
}
.swiperContainer img{
  width: 100%;
  height:  100%;
}
  /**
  修改小圆点样式
  **/
.swiperContainer>>>.swiper-pagination-bullet-active{
  background:#fff;
}

</style>
